.wrapper{
    display: grid;
    grid-template-columns: auto 230px minmax(320px, 1200px) auto;
    min-height: 100vh;
    gap: 0 30px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
    ". header header ."
    ". sidebar body ."
    "footer footer footer footer"
    ;
}
.header {
    grid-area: header;
    display: none;
}

.sidebar {
    grid-area: sidebar;
}
.body {
    grid-area: body;
}
.footer {
    grid-area: footer;
}
@media (max-width: 765px) {
    .wrapper{
        grid-template-columns: minmax(320px, 1fr);
        grid-template-areas: 
        "header"
        "body"
        "footer"
        ;
    }
    .sidebar {
        display: none;
    }
    .header {
        display: block;
    }
}
